{% extends "admin/base.html" %}

{% block content_main %}
<div class="layui-row">
    <div class="layui-col-md12">
        <h1 style="text-align: center">系统用户量</h1>
        <div id="main" style="height: 580px;"></div>
    </div>
</div>
{% endblock %}

{% block script %}
<script type="text/javascript" src="/static/js/echarts.js"></script>
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: {{ xAxis_data|safe }},
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      data: {{ series_data }}
    }
  ]
};

option && myChart.setOption(option);
</script>
{% endblock %}